<template>
    <div style="height:100%;width:100%;" class="detail">
        <search right-label="搜索" @on-back="$router.back()" @on-right-click="onItemIC" placeholder="IC卡号/姓名/加油机编号/名称"
                class="search search-ic">
        </search>
        <group class="detail-block">
            <div style="display: flex; flex-wrap: wrap;">
                <div v-for="(item,key) in eventType" class="event-list" @click="handleItem(key)" :key="key">{{item}}</div>
                <div style="width: 30%; flex-grow: 1;margin: 6px;"></div>
            </div>
        </group>
    </div>
</template>

<script>
    import constants from '../../../util/Constants.vue'
    import scroll from '../../../components/scroll.vue'
    import {
        Bar,
        Search
    } from 'muka-ui'
    import {
        Group,
        Cell,
        CellBox,
        InlineLoading,
        Divider
    } from 'vux'
    export default {
        name: 'dataInfo',
        components: {
            Bar,
            Group,
            Cell,
            CellBox,
            Search,
            InlineLoading,
            Divider,
            scroll
        },
        created: function () {
            this.eventType = constants.EVENT_TYPE
        },
        data: function () {
            return {
                eventType:{},
                type: null,
                searchText: '',
            }
        },
        methods: {
            //选择类型查询
            handleItem: function (type) {
                this.$router.push({name:'eventListSearch', query: {type: type, keyword: null}})
            },

            //关键字查询
            onItemIC: function (keyword) {
                if (!keyword) {
                    this.$vux.toast.show({
                        text: '请输入查询内容',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$router.push({name:'eventListSearch', query: {type: null, keyword: keyword}})
            },
        }
    }

</script>

<style lang="less" scoped>
    .detail-timePick {
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        .detail-timePick-icon {
            float: right;
            line-height: 45px;
            font-size: 20px;
        }
    }

    .vux-cell-box {
        height: 40px;
    }

    .detail-add {
        color: #44b549;
        font-weight: 700;
    }

    .event-list {
        flex-grow: 1;
        width: 30%;
        text-align: center;
        line-height: 40px;
        margin: 6px;
        background: #44b549;
        color: white;
    }


</style>
